<template>
  <el-card class="box-card" shadow="hover">
    <!-- 头像 -->
    <!-- <router-link to="/login" :underline="false"> -->
    <el-avatar
      shape="circle"
      :size="200"
      fit="fill"
      :src="heard"
      @click.native="tologin"
    ></el-avatar>
    <!-- </router-link> -->
    <!-- 分割线  -->
    <el-divider class="bj">Vayne</el-divider>
    <el-menu
      default-active="this.$route.path.substr(1)"
      class="el-menu-vertical-demo bj"
      background-color="#FFCC00"
      router
      active-text-color="#ffffff"
    >
      <el-menu-item
        v-for="(item, index) in menuRoute"
        :index="item.path"
        :key="index"
      >
        <i class="item.icon"></i>
        <span>{{ item.name }}</span>
      </el-menu-item>
    </el-menu>
    <el-divider class="bj"><i class="el-icon-location-outline"></i></el-divider>
    <el-breadcrumb class="bj" separator-class="el-icon-arrow-right">
      <!-- :to="{ path: '/' }" -->
      <el-breadcrumb-item v-for="(item, index) in links" :key="index">
          <a v-if="item.name!='简历'" target="_blank" :href="item.url">{{ item.name }}</a>
          <a v-else target="_blank" @click="open">{{ item.name }}</a>
      </el-breadcrumb-item>
    </el-breadcrumb>
    <el-divider class="bj"><i class="el-icon-edit-outline"></i></el-divider>
    <el-col><h6>工信部备案号：京ICP备2020043760号-1</h6></el-col>
  </el-card>
</template>

<script>
import download from 'downloadjs'
export default {
  name: "Navigation",
  data() {
    return {
      heard: require("../assets/heardleft.jpg"),
      menuRoute: [
        { name: "简介", path: "/aboutMe", icon: "el-icon-user" },
        { name: "经历", path: "/work", icon: "el-icon-tickets" },
        { name: "技能", path: "/skill", icon: "el-icon-suitcase" },
        { name: "缘启", path: "/education", icon: "el-icon-s-management" },
      ],
      links: [
        { url: "http://liuhong.xyz/", name: "博客" },
        { url: "http://note.jason-tao.xyz/", name: "简历" },
        { url: "https://gitee.com/lol_liutao/vueresume", name: "Vue" },
        { url: "https://gitee.com/lol_liutao/nodejs", name: "Nodejs" },
        { url: "https://gitee.com/lol_liutao/stdu", name: "Framework" },
      ],
    };
  },
  methods: {
    tologin() {
      let token = sessionStorage.getItem("token");
      if (!token) {
        this.$router.push({ path: "/login" });
      } else {
        this.$router.push({ path: "/updateInfo/uaboutme" });
      }
    },
    open(){
      this.$mb.prompt('请输入666666', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputPattern:  /\d{6}?/,
        inputErrorMessage: '密码格式不正确'
      }).then(({ value }) => {
        if(value == 666666){
          this.$message({
            type: 'success',
            message: '密码正确!',
          });
          download("xxx");
        }else{
          this.$message({
            type: 'error',
            message: '密码不正确'
          });
        }
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '取消输入'
        });
      });
    }
  },
};
</script>
<style scoped>
.box-card {
  height: 1000px;
  /* background-color: #e6a23c; */
  background-color: #FFCC00;
  /* -moz-box-shadow: 5px 5px 10px #B7B7B7;
   box-shadow: 5px 5px 10px #B7B7B7 */
}
.bj {
  margin-top: 50px;
}
.el-breadcrumb__item {
  float: none;
}
.el-menu {
  border-right: none;
}
</style>
